import { ISchema } from '@formily/react';
import { Path } from '@formily/path';
import ColumnConfig from './ColumnConfig';
import MyAutoComplete from '@components/form/base/EformInput/designer/components/MyAutoComplete';
import { GlobalRegistry } from '@inbiz/core';
import { InputNumber, Space } from 'antd';

export const getMessage = (token: string, locales: { [key: string]: any }): string => {
  const lang = GlobalRegistry.getDesignerLanguage() || 'zh-cn';
  const locale = locales ? locales[lang] : lang;
  return Path.getIn(locale, token);
};

export const SubTable: { [key: string]: ISchema } = {
  readOnly: {
    type: 'string',
    enum: [false, true ],
    'x-decorator': 'FormItem',
    'x-component': 'Select',
    'x-component-props': {
      defaultValue: false,
    }
  },

  align: {
    type: 'string',
    enum: ['left', 'right', 'center'],
    'x-decorator': 'FormItem',
    'x-component': 'Select',
    'x-component-props': {
      defaultValue: 'left',
    },
    platform: 'web',
  },
  showLineNumber: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    'x-component-props': {
      defaultChecked: true,
    },
    platform: 'web',
  },
  resizeColumnWidth: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    'x-component-props': {
      defaultChecked: true,
    },
    platform: 'web',
  },
  inlineEdit: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    'x-component-props': {
      defaultChecked: false,
    },
    "x-reactions": {
      effects: ['onFieldInputValueChange'],
      "dependencies": [".inlineEdit"], //依赖路径写法默认是取value，如果依赖的是字段的其他属性，可以使用 source#modified，用#分割取详细属性
      "fulfill": {
        run: `
          if (!$deps[0]) {
            var value = $form.query(/columnConfig/).take().value;
            if (value && value.tableValues && value.tableValues.actions) {
              value.tableValues.actions.forEach(function(item){
                if (item.actionType === 'add') {
                    item.openMode = 'modal'
                }
              })
            }
          }
        `
      }
    }
  },
  search: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    'x-component-props': {
      defaultChecked: false,
    },
  },
  searchField: {
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': MyAutoComplete,
    'x-component-props': {
      mode: 'multiple',
    },
    'x-reactions': {
      dependencies: [
        'form.senior.soure.sourceModelUpdate',
        'form.attribute.base.x-component-props.search',
      ],
      fulfill: {
        state: {
          visible: '{{$deps[1] == true}}',
        },
        schema: {
          //@ts-ignore
          'x-component-props.update': '{{$deps[0]}}',
          'x-component-props.valueType': 'value',
          // 'x-hidden':'{{!$deps[1]}}'
        },
      },
    },
  },
  columnConfig: {
    type: 'object',
    'x-decorator': 'FormItem',
    'x-component': (props: any) => {
      return <ColumnConfig {...props} />;
    }
    // platform: 'web',
  },
};
export const TableStyle: { [key: string]: ISchema } = {
  height: {
    type: 'number',
    'x-decorator': 'FormItem',
    'x-component': (props: any) => {
      return (
        <Space direction="vertical">
          <InputNumber
            addonAfter="px"
            value={props.value}
            onChange={(value) => props.onChange(value)}
          />
        </Space>
      );
    },
  },
  rowHeight: {
    type: 'string',
    'x-decorator': 'FormItem',
    enum: ['middle', 'small', 'default'],
    'x-component': 'Select',
    'x-component-props': {
      defaultValue: 'default',
    },
    platform: 'web',
  },
  zebraEffect: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
  },
  fullScreen: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    'x-component-props': {
      defaultChecked: true,
    },
  },
};

export const H5TableStyle: { [key: string]: ISchema } = {
  'style.borderRadius': {
    'x-component': 'BorderRadiusStyleSetter',
  },
};
